<template>
  <div class="playlist">
    <div class="playlisttop">
      <div class="left">
        <svg t="1649938110550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="13040" width="16" height="16">
          <path
            d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667zM456.704 305.92C432.704 289.152 405.333333 303.082667 405.333333 331.797333v360.533334c0 28.586667 27.541333 42.538667 51.370667 25.856l252.352-176.768c21.76-15.253333 21.632-43.541333 0-58.709334l-252.373333-176.768z m-8.597333 366.72V351.466667l229.269333 160.597333-229.269333 160.597333z"
            fill="#3D3D3D" p-id="13041"></path>
        </svg>
        <span style="font-size: 0.34rem;"> {{ $t('playinglist.playall') }} </span>
        <span style="color: #ccc;">({{ $t('playinglist.total') }}{{ songlistdetail.tracks.length }}{{
          $t('playinglist.songNum')
        }})</span>
      </div>
      <div class="righ">
        + {{ $t('playinglist.collect') }} ({{ songlistdetail.subscribedCount }})
      </div>
    </div>
    <div class="content">
      <div class="songitem" v-for="(item, index) in songlistdetail.tracks "
        @click="searchStore.asyncsongDetail(item.id, item, index)">
        <div class="paixu">{{ index + 1 }}</div>
        <div class="songinfo">
          <div class="name">{{ item.name }}</div>
          <div class="info" style="font-size: 0.2rem;color: gray;   overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;">
            {{ item.ar[0].name }}-{{ item.al.name }}
          </div>
        </div>
        <div class="video" v-if="item.mv !== 0" @click.stop="clickVideoToMv(item.mv)">
          <svg t="1649945282261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="14638" width="16" height="16">
            <path
              d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z"
              fill="#444444" p-id="14639"></path>
          </svg>
        </div>
        <div class="more"><svg t="1649943062143" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="13839" width="16" height="16">
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="13840"></path>
          </svg></div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { computed, nextTick } from "vue";
import { useRouter, } from 'vue-router'
import { homeStore } from '@/store/home.js'
import { musicplaycontrolStore } from '@/store/playcontrol.js'
import { search } from '@/store/search.js'
const searchStore = search()
const store = homeStore()
const router = useRouter()
let songlistdetail = computed(() => store.songlistdetail)

// 跳转到mv界面
let clickVideoToMv = (id) => {
  musicplaycontrolStore().$patch({
    pause: true
  })
  router.push(
    {
      name: 'mv',
      params: { mvid: id }
    }
  )
}
</script>

<style scoped lang="less" >
.video,
.more {
  margin-left: 0.2rem;

  svg {
    width: 0.55rem;
    height: 0.55rem;
  }

}

.songitem {
  margin: 0.2rem 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;



  .paixu {
    width: 0.7rem;
    height: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    margin-right: 0.4rem;
    font-size: 0.3rem;
    color: gray;

  }

  .songinfo {
    width: 6.8rem;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(168, 160, 160, 0.1);
    padding-bottom: 0.1rem;
  }
}

.playlist {
  background-color: rgba(240, 248, 255, 0.9);
  margin-top: 0.4rem;
  width: 7.5rem;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;


  .playlisttop {
    padding: 0.12rem;

    display: flex;
    justify-content: space-between;


    .left {
      display: flex;
      align-items: center;
      margin-left: 0.2rem;


      span {
        margin-left: 0.2rem;

        ;
      }
    }

    .righ {
      background-color: orangered;
      line-height: 0.7rem;
      border-radius: 0.2rem;
      margin-right: 0.2rem;
      padding: 0 0.15rem;
      font-size: 0.3rem;
      color: white;
    }
  }

  .content {
    height: 60vh;
    overflow: scroll;
    // margin-bottom: 1.5rem;
    padding-bottom: 2rem;

    .songitem {}
  }
}
</style>
 